.Lettermark {
    display: inline-block;
    flex-shrink: 0;
    width: 2em;
    height: 2em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 2em;
    color: var(--lettermark-1-text);
    text-align: center;
    user-select: none;
    background: var(--lettermark-1-bg);
    border-radius: var(--radius-sm);

    &.Lettermark--rounded {
        border-radius: 1.5rem;
    }

    &.Lettermark--variant-gray {
        color: var(--text-3000);
        background: var(--border);
    }

    &.Lettermark--xsmall {
        font-size: 0.5rem;
    }

    &.Lettermark--xlarge {
        font-size: 2rem;
        border-radius: var(--radius);
    }

    @each $variant in (1, 2, 3, 4, 5, 6, 7, 8) {
        &.Lettermark--variant-#{$variant} {
            color: var(--lettermark-#{$variant}-text);
            background: var(--lettermark-#{$variant}-bg);
        }
    }
}
